<template>
  <div class="orderdetail" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.6)">
    <div class="header">
      <el-button @click="$router.go(-1)" type="primary">返回</el-button>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/indent' }"
          >订单列表</el-breadcrumb-item
        >
        <el-breadcrumb-item>订单详情</el-breadcrumb-item>
      </el-breadcrumb>
      <Goodorder />
      <el-button type="primary">退出</el-button>
      <el-button type="info">失效</el-button>
    </div>
    <Detailinfo />
  </div>
</template>

<script>
import Detailinfo from "./ui/detailinfo.vue";
import Goodorder from "./ui/goodorder.vue";
import {createNamespacedHelpers} from 'vuex'
let { mapActions } = createNamespacedHelpers("indent");
export default {
  data(){
    return {
      loading: false
    }
  },
  components: { Goodorder, Detailinfo },
  mounted() {
    this.orderInfoId(this.$route.params.id);
  },
  methods: {
    ...mapActions(["orderInfoId"]),
  },
};
</script>

<style lang="scss" scoped>
.orderdetail {
  padding: 0 20px;
  overflow: hidden;
  .header{
    margin-top: 10px;
  }
  .el-button--primary {
    background-color: rgb(23, 28, 73);
    border-color: rgb(23, 28, 73);
    float: left;
    box-shadow: #999 0px 0px 20px;
  }
  .el-breadcrumb {
    width: 240px;
    height: 40px;
    float: left;
    box-shadow: #999 0px 0px 20px;
    color: rgb(23, 28, 73);
    font-weight: 700;
    font-size: 17px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    margin-left: 10px;
    margin-right: 10px;
  }
  .el-button--info {
    float: left;
    margin-left: 15px;
    box-shadow: #999 0px 0px 20px;
  }
}
</style>